<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        /*
            为所有具有title属性的p元素，设置一个背景颜色为黄色

            属性选择器：
                可以根据元素中的属性或属性值来选取指定元素
                [属性名] 选取含有指定属性的元素
                [属性名=属性值] 选取含有指定属性值的元素
                [属性名^=属性值] 选取属性值以指定内容开头的元素
                [属性名$=属性值] 选取属性值以指定内容结尾的元素
                [属性名*=属性值] 选取属性值包含指定内容的元素

        */

        p[title]{
            background-color: yellow;
        }

        p[title="hello"]{
            background-color: green;
        }

        p[title^="ab"]{
            background-color: red;
        }

        p[title$="df"]{
            background-color: blue;
        }

        p[title*="we"]{
            background-color: coral;
        }


    </style>
</head>
<body>

    <!--
        title属性：这个属性可以给任何标签指定。
        当鼠标移入到文字上时，元素中title属性的值将会作为提示文字显示
    -->
    <p title="hello">我是一个段落</p>

    <p>我是一个段落</p>

    <p title="abc">我是一个段落</p>

    <p>我是一个段落</p>

    <p title="abcd">我是一个段落</p>

    <p>我是一个段落</p>

    <p title="asdf">我是一个段落</p>

    <p>我是一个段落</p>

    <p title="eddf">我是一个段落</p>

    <p>我是一个段落</p>

    <p title="qwertyuio">我是一个段落</p>

    <p>我是一个段落</p>

    <p title="we">我是一个段落</p>

    <p>我是一个段落</p>

    <p title="world">我是一个段落</p>

</body>
</html>